<template>
  <div class="header-container flex-ac">
    <div class="header-left flex-ac">
      <el-icon @click="MenuStore.toggleCollapse()" class="icon" size="20"
        ><Fold
      /></el-icon>
      <ul class="tagbox flex-ac">
        <li
          class="tagli flex-ac"
          :class="{ selected: route.path === item.path }"
          v-for="(item, index) in SelectMenu"
          :key="index"
        >
          <el-icon size="12"><component :is="item.icon" /></el-icon>
          <router-link class="text flex-ac" :to="{ path: item.path }">{{
            item.name
          }}</router-link>
          <el-icon @click="CloseClick(item, index)" class="close" size="12"
            ><Close
          /></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleClick">
        <div class="el-dropdown-link flex-ac">
          <el-avatar :src="getAdminData.avatar" />
          <div class="user-admin">{{ getAdminData.name }}</div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="outAdmin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useMenuStore } from "../store/index";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
const MenuStore = useMenuStore();

const SelectMenu = MenuStore.selectMenu;
const router = useRouter();
const route = useRoute();
const MenuData = useMenuStore();
const { getAdminData } = storeToRefs(MenuData);

const CloseClick = (item, index) => {
  MenuStore.CloseMenu(item);
  if (route.path !== item.path) {
    return;
  }
  // 如果是最后删除的是最后一个的话就跳转到前面的路由
  if (index === SelectMenu.length) {
    if (!SelectMenu.length) {
      router.push("/");
    } else {
      router.push({ path: SelectMenu[index - 1].path });
    }
  } else {
    router.push({ path: SelectMenu[index].path });
  }
};

const handleClick = (command) => {
  if (command === "outAdmin") {
    localStorage.removeItem("pz_token");
    localStorage.removeItem("pz_userInfo");
    window.location.href = window.location.origin;
  }
};
</script>

<style scoped lang="less">
/* styles */
.flex-ac {
  display: flex;
  align-items: center;
}
.header-container {
  height: 100%;
  background: #fff;
  justify-content: space-between;
  padding-right: 25px;
  .header-left {
    height: 100%;
    .icon {
      width: 45px;
      height: 100%;
      &:hover {
        background: #f5f5f5;
        cursor: pointer;
      }
    }
    .tagbox {
      height: 100%;
      .tagli {
        padding: 0 10px;
        height: 100%;
        .text {
          margin: 0 5px;
          height: 100%;
          color: #333;
          font-size: 15px;
          text-decoration: none;
        }
        .icon {
          height: 100%;
        }
        .close {
          visibility: hidden;
          color: #000;
        }
        &:hover {
          background: #f5f5f5;
          cursor: pointer;
          .close {
            visibility: unset;
            color: #000;
          }
        }

        &.selected {
          background: #f5f5f5;
          cursor: pointer;
          color: #409eff;
          .text {
            color: #409eff;
          }
        }
      }
    }
  }
  .header-right {
    .el-dropdown {
      .el-dropdown-link {
        cursor: pointer;
        .user-admin {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>